<template>
    <div class="box">
        <div class="box_div">
            <div class="item" @click="ClickWorkOrder(0)" style="background-color: rgb(112,184,216);">
                <div class="text">新建工单</div>
            </div>
            <div class="item" @click="ClickWorkOrder(1)" style="background-color: rgb(168,149,217);">
                <div class="text" style="font-size: 62px;">{{TodoTotal}}</div>
                <div class="min_text">
                        待处理的工单数
                </div>
            </div>
            <div class="item" @click="ClickWorkOrder(2)" style="background-color: rgb(99,193,207);">
                <div class="text" style="font-size: 62px;">{{DoneTotal}}</div>
                <div class="min_text">
                    已完成的工单数
                </div>
            </div>
            <div v-if="false" class="item" @click="ClickWorkOrder(3)" style="background-color: rgb(214,118,102);">
                <div class="text" style="font-size: 62px;">0</div>
                <div class="min_text">
                    我的请求工单数
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { taskTodoList } from "@/api/todoItem/todo.js";
import request from "@/utils/request";
export default {
    name:'work',
    data(){
        return{
            queryParams:{
                pageNum: 1,
                pageSize: 10,
            },
            TodoTotal:0,
            DoneTotal:0,
        }
    },
    created(){
        taskTodoList(this.queryParams).then((response) => {
            this.TodoTotal = response.total;
            this.loading = false;
        });
        return request({
            url: "/task/taskDoneList",
            method: "get",
            params: this.queryParams,
        })
            .then((response) => {
                this.DoneTotal = response.total;
            })
    },
    methods:{
        ClickWorkOrder(num){
            if(num == 0){
                this.$router.push('/todoItem/WorkOrder')
            }else if(num == 1){
                this.$router.push("/todoItem/todo");
            }else if(num == 2){
                this.$router.push("/todoItem/done");
            }else if(num == 3){
                return
            }else{
                return
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .box{
        width: 100%;
        height: calc(100vh - 70px);
        background-color: rgb(232,236,240);
        overflow: hidden;
        .box_div{
            box-sizing: border-box;
            width: calc(100% - 40px);
            height: 240px;
            margin: 20px;
            margin-top: 20px;
            background-color: rgb(255,255,255);
            display: flex;
            .item{
                margin-left: 35px;
                margin-top: 30px;
                width: 300px;
                height: 180px;
                position: relative;
                cursor: pointer;
                .text{
                    position: absolute;
                    top: 0px;
                    left: 50px;
                    width: 300px;
                    height: 180px;
                    line-height: 180px;
                    font-size: 32px;
                    color: #fff;
                }
                .min_text{
                    position: absolute;
                    bottom: 0px;
                    left: 50px;
                    width: 300px;
                    height: 58px;
                    line-height: 58px;
                    font-size: 22px;
                    color: #fff;
                }
            }
        }
    }
</style>